<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

// 侧边栏组件

const props = defineProps({
  currentUserName: {
    type: String,
    required: true
  },
  activeTodosLength: {
    type: Number,
    required: true
  },
  categories: {
    type: Array<string>,
    required: true
  },
  activeCategory: {
    type: String,
    required: true
  }
})

const emit = defineEmits(['logout', 'switch-category'])

const handleLogout = () => {
  emit('logout')
}

const switchCategory = (category: string) => {
  emit('switch-category', category)
}
</script>

<template>
  <aside class="sidebar">
    <div class="user-info">
      <span class="username">{{ currentUserName }}</span>
      <button class="logout-btn" @click="handleLogout">退出</button>
    </div>
    <div class="today-todo">
      <span class="today-label">待办事项</span>
      <span class="todo-count">{{ activeTodosLength }}</span>
    </div>
    <ul class="category-list">
      <li
        v-for="category in categories"
        :key="category"
        class="category-item"
        :class="{ active: activeCategory === category }"
        @click="switchCategory(category)"
      >
        {{ category }}
      </li>
    </ul>
  </aside>
</template>